<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('公司列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: container-css"/>
    <style type="text/css">
        .orgchart {
            background: #fff;
        }

        .orgchart td.left, .orgchart td.right, .orgchart td.top {
            border-color: #aaa;
        }

        .orgchart td > .down {
            background-color: #aaa;
        }

        .orgchart .middle-level .title {
            background-color: #006699;
        }

        .orgchart .middle-level .content {
            border-color: #006699;
        }

        .orgchart .product-dept .title {
            background-color: #009933;
        }

        .orgchart .product-dept .content {
            border-color: #009933;
        }

        .orgchart .rd-dept .title {
            background-color: #993366;
        }

        .orgchart .rd-dept .content {
            border-color: #993366;
        }

        .orgchart .pipeline1 .title {
            background-color: #996633;
        }

        .orgchart .pipeline1 .content {
            border-color: #996633;
        }

        .orgchart .frontend1 .title {
            background-color: #cc0066;
        }

        .orgchart .frontend1 .content {
            border-color: #cc0066;
        }
    </style>
</head>
<body class="gray-bg">

<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 公司组织机构
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i
                        class="fa fa-edit"></i></a>
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                        class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center" id="ui-layout-center">
    <div id="chart-container"></div>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: container-js"/>


<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('hr:company:edit')}]];
    var detailFlag = [[${@permission.hasPermi('hr:company:detail')}]];

    var prefix = ctx + "company";
    $(function () {
        var panehHidden = false;
        if ($(this).width() < 800) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 350});
        findAllTree();
        queryCompanyTree();
    });

    function findAllTree(compID) {
        var datascource;
        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: ctx + "orgs/findAllTree",
            data : {
                "compID" : compID
            },
            //请求成功
            success: function (result) {
                datascource = result;
                console.log(JSON.stringify(datascource));
                $('#chart-container').orgchart({
                    'data': datascource,
                    'nodeContent': 'title',
                    'direction': 'l2r',
                    'draggable': true,
                });
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }


    function queryCompanyTree() {
        var url = ctx + "jinpeng/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            if(treeNode.id > 30000){
                $.modal.msgWarning('请选择公司名称')
                return;
            }
            $('#chart-container').remove();
            $('#ui-layout-center').append('<div id="chart-container"></div>');
            findAllTree(treeNode.id);
        }
    }
</script>
</body>
</html>